.editor {
    width: 100%;
    height: 100%;

    &-left,
    &-right {
        position: absolute;
        width: 270px;
        background: red;
        top: 0;
        bottom: 0
    }

    &-left {
        left: 0;
    }

    &-right {
        right: 0
    }

    &-top {
        position: absolute;
        right: 280px;
        left: 280px;
        height: 80px;
        background: blue;
    }

    &-container {
        padding: 80px 270px 0;
        height: 100%;
        box-sizing: border-box;


        &-canvas {
            overflow: scroll;
            height: 100%;

            &-content {
                margin: 20px auto;
                width: 1000px;
                height: 1000px;
                background-color: yellow;
                position: relative;
            }
        }
    }
}

.editor-block {
    position: absolute;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        opacity: .2;
    }
}

.editor-left-material {
    &-item {
        width: 250px;
        margin: 20px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        cursor: move;
        user-select: none;
        min-height: 100px;
        position: relative;

        >span:nth-child(1) {
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgb(96, 205, 224);
            color: #fff;
            padding: 4px;

        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            opacity: .2;
        }
    }
}

.editor-block-focus{
    &::after {
        border: 2px dashed red;
        padding: 5px;
        display: block;
    }
}